<!-- 
  v-model绑定在各个表单组件中
-->
<script setup>
  import { ref } from "vue";

  const name = ref("")
  const introduce = ref("")
  const address = ref("")
  const gender = ref("")
  const hobbies = ref([])
  const confirm = ref(false)
</script>

<template>
  <div>
    <table>
      <tr>
        <!-- 绑定输入框-直接绑定 -->
        <td>姓名：</td>
        <td><input type="text" v-model="name"></td>
      </tr>
      <tr>
        <!-- 绑定文本域-直接绑定 -->
        <td>自我介绍：</td>
        <td><textarea rows="3" cols="20" v-model="introduce"></textarea></td>
      </tr>
      <tr>
        <!-- 下拉菜单-直接在select标签上进行绑定 -->
        <td>籍贯地址</td>
        <td>
          <select v-model="address">
            <option value="" selected>--请选择籍贯地址--</option>
            <option value="BJ">北京市</option>
            <option value="HN">湖南省</option>
            <option value="GX">广西壮族自治区</option>
            <option value="QH">青海省</option>
          </select>
        </td>
      </tr>
      <tr>
        <!-- 单选框-手动为input添加value属性，之后再进行绑定 -->
        <td>性别</td>
        <td>
          <span>
            <label for="male">男</label>
            <input id="male" type="radio" value="male" v-model="gender">
          </span>
          <span>
            <label for="female">女</label>
            <input id="female" type="radio" value="female" v-model="gender">
          </span>
        </td>
      </tr>
      <tr>
        <!-- 复选框-选择多个时，需要为input添加value值 -->
        <td>兴趣爱好</td>
        <td>
          <span>
            <input id="badminton" type="checkbox" value="badminton" v-model="hobbies">
            <label for="badminton">羽毛球</label>
          </span>
          <span>
            <input id="cycling" type="checkbox" value="cycling" v-model="hobbies">
            <label for="cycling">骑行</label>
          </span>
          <span>
            <input id="swimming" type="checkbox" value="swimming" v-model="hobbies">
            <label for="swimming">游泳</label>
          </span>
          <span>
            <input id="think" type="checkbox" value="think" v-model="hobbies">
            <label for="think">思考</label>
          </span>
        </td>
      </tr>
      <tr>
        <!-- 复选框-选择一个时，直接绑定 -->
        <td></td>
        <td>
          <span>
            <input type="checkbox" v-model="confirm">
            我已认真阅读并同意上述用户条款
          </span>
        </td>
      </tr>
    </table>

  </div>
</template>

<style scoped>

</style>